<template>
  <div id="admin">
    <h1>用户管理系统</h1>
    <el-button type="primary" @click="handleAdd" class="add-user-btn">新增用户</el-button>
    <el-divider />
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="common">
        <el-icon><User /></el-icon>
        <span>普通用户</span>
      </el-menu-item>
      <el-menu-item index="traffic">
        <el-icon><Guide /></el-icon>
        <span>交通管理员</span></el-menu-item
      >
    </el-menu>
    <el-table :data="formData" height="300" style="width: 100%">
      <el-table-column label="用户名" width="180" >
        <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.username }}</span>
        </div>
      </template>
      </el-table-column>
      <el-table-column  label="密码" width="180" >
        <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.password }}</span>
        </div></template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            修改密码
          </el-button>
          <el-button
            size="small"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除用户
          </el-button>

          <el-button
            size="small"
            type="danger"
            @click="handleLogout(scope.$index, scope.row)"
            v-if="scope.row.isOnline"
          >
            强制下线
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <EditUser v-if="isEditing" :form="form" :editType="editType" @submit="handleSubmit" @close="handleClose" class="edit-user"/>
</template>


<script setup>
import { ref, onMounted,computed} from "vue";
import { User, Guide, } from "@element-plus/icons-vue";
import {
  userRegisterHttp,
  userInfoHttp,
  userLogoutHttp,
  userDeleteHttp
} from "@/api/user";
import EditUser from "./component/EditUser.vue";
// 定义当前的菜单项
const activeIndex = ref("common");
// 定义是否正在编辑用户信息
const isEditing = ref(false);
const form=ref({})
const editType=ref(1)
/* 定义一个渲染表单的数据 */
const formData = ref([]);
const total=computed(()=>Math.ceil(formData.value.length/5))
/* 强制获取当前最新用户信息 */
const getUserData=async ()=>{
const useInfo = await userInfoHttp(activeIndex.value);
  console.log(useInfo.result);
  formData.value = useInfo.result;
}
// 切换菜单项
const handleSelect = async (index) => {
  activeIndex.value = index;
  //console.log(activeIndex.value);
  await getUserData();
};

onMounted(async () => {
    await getUserData();
});

/* 编辑用户信息 */
const handleEdit = (index, row) => {
  //console.log(index, row);
    /* 获取该行用户信息，并渲染到表单中进行编辑 */
   form.value={
    username:row.username,
    newPassword:"",
    type:activeIndex.value
  }
  isEditing.value = true;
  editType.value=1
};
const handleSubmit=async (form)=>{
    isEditing.value = false;
    await getUserData();// 刷新用户信息
}
/* 删除用户 */
const handleDelete = (index, row) => {
  //console.log(index, row);
  userDeleteHttp({username:row.username,type:activeIndex.value}).then((res)=>{
    getUserData();// 刷新用户信息
  })
};

/* 强制下线 */
const handleLogout =async (index, row) => {
  //console.log(index, row);
  userLogoutHttp({username:row.username,type:activeIndex.value}).then((res)=>{
    getUserData();// 刷新用户信息
  })
};

/* 新增用户 */
const handleAdd=()=>{
    isEditing.value = true;
    editType.value=activeIndex.value==="common"?2:3
    form.value={
    username:"",
    newPassword:"",
    type:activeIndex.value
  }
}

/* 关闭编辑用户信息弹窗 */
const handleClose=()=>{
    isEditing.value = false;
}
</script>
<style scoped>
#admin {
  background-color: #f5f5f5;
  width: 50%;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
h1 {
  text-align: center;
  font-size: 24px;
  margin: 0;
  color: #333;
}
.el-menu--horizontal {
  --el-menu-horizontal-height: 50px;
}
.edit-user{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
}
.add-user-btn{
    position: absolute;
    top: 20px;
    right: 20px;
}
</style>
